<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>找回密码</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/global.css" />
    <link rel="stylesheet" href="../css/change_pass.css" />
    <script src="../lib/autoSize.js"></script>

</head>

<body>
    <header>
        <div class="left-btn">
            <img class="back" src="../images/header/back.png" alt="" onclick="history.go(-1)">
        </div>
        <h1 class="">找回密码</h1>
        <div class="right-btn"></div>
    </header>

    <main>
        <div>
            <img src="../images/icons/phone.png" alt="">
            <input type="text" id="js_phone" placeholder="请输入手机号" />
        </div>
        <div>
            <img src="../images/icons/verify.png" alt="">
            <input type="text" id="js_code" placeholder="请输入短信验证码" autocomplete="off" />
            <span id="get_verify">获取验证码</span>
        </div>
        <div>
            <img src="../images/icons/locked.png" alt="">
            <input type="password" id="js_newpwd" placeholder="请设置新密码" autocomplete="off" />
            <div id="hide_pass"></div>
        </div>
        <button id="js_submit">完成</button>
    </main>

    <script src="../lib/jquery-3.2.1.min.js"></script>
    <script src="../lib/layer.js"></script>
    <script src="../js/common.js"></script>
    <script src="../lib/fastclick.js"></script>
    <script>
        $(function () {
            FastClick.attach(document.body);
        });

        $("#hide_pass").on("click", function () {
            $(this).toggleClass("active");
            if($("#js_newpwd").attr("type") == "password"){
                $("#js_newpwd").attr("type","text");
            }else{
                $("#js_newpwd").attr("type","password");
            }
        })

        $(function () {

            $.fn.getVerifyCode = function (options) {
                var phoneReg = /^1[34578]\d{9}$/;
                var phoneTimer = null;
                var opts = $.extend({
                    duration: 60,
                    onRequest: function () {}
                }, options);

                $(this).on('click', handleCode);

                function handleCode(ev) {
                    opts.phone = $('#js_phone').val();
                    var $target = $(ev.target);
                    if (!phoneReg.test(opts.phone)) {
                        layer.open({
                            content: '手机号格式不正确',
                            skin: 'msg',
                            time: 1.5
                        });
                        return;
                    }

                    if ($target.attr('data-status') == 0) {
                        return;
                    }

                    typeof opts.onRequest === 'function' && opts.onRequest(opts.phone);

                    $target.attr('data-status', 0).html(opts.duration + 's后再获取');
                    window.clearInterval(phoneTimer);
                    var iNow = opts.duration;
                    phoneTimer = window.setInterval(function () {
                        iNow--;
                        if (iNow <= 0) {
                            $target.attr('data-status', 1).html('获取验证码');
                            window.clearInterval(phoneTimer);
                        } else {
                            $target.html(iNow + 's后再获取');
                        }
                    }, 1000);
                }


            }
            $(function () {
                // 发送手机验证码
                $('#get_verify').getVerifyCode({
                    duration: 120,
                    onRequest: function (phone) {
                        API.sendMessage(phone, function (res) {}, function (errMsg) {
                            layerMsg(errMsg);
                        });
                    }
                });


                // 下一步
                $('#js_submit').on('click', function (ev) {
                    var phoneNumber = $('#js_phone').val();
                    var code = $('#js_code').val();
                    var newPwd = $("#js_newpwd").val();


                    if (!/^1[34578]\d{9}$/.test(phoneNumber)) {
                        layer.open({
                            content: '请输入正确的手机号',
                            skin: 'msg',
                            time: 1.5
                        });
                        return;
                    }
                    if (code == '') {
                        layer.open({
                            content: '请输入正确的验证码',
                            skin: 'msg',
                            time: 1.5
                        });
                        return;
                    }
                    if (newPwd.length < 6 || newPwd.length > 15) {
                        w_cm.layerMsg('密码格式不正确(6-15位)！');
                        return;
                    }

                    API.validateCode(phoneNumber, code, function (res) {
                        submitRegist(phoneNumber, newPwd);
                    }, function (errMsg) {
                        layer.open({
                            content: errMsg,
                            skin: 'msg',
                            time: 1.5
                        });
                    })

                });
            });

        });

        function submitRegist(phoneNumber, newPwd) {
            API.findPwd(phoneNumber, newPwd, CONFIG.businessId, function (res) {
                tools.layerMsg(res.msg);
                window.setTimeout(function () {
                    window.location.href = 'login.html';
                }, 1500)
            }, function (errMsg) {
                tools.layerMsg(errMsg);
            })
        }
    </script>

</body>

</html>